<template>
  <div :class="tableData.length < 3?'internet-monitor-nodata':'internet-monitor' ">
    <div class="content-item-tittle">物联网监测</div>
    <div class="internet-left-right">
      <div :class="tableData.length === 2 || tableData.length === 1 ? 'internet-content-nodata':'internet-content'" v-if="tableData.length !== 0">
        <p class="item-content-tittle">实时警情明细</p>
        <div class="internetList">
          <ul class="infinite-list">
            <template v-for="(item, index) in tableData">
              <li class="label-type-item" :key="index" @click="jumpJCJ_wfw(item.name)">
                <el-image style="width: 50px; height: 50px" :src="item.detailPic?(JSON.parse(item.detailPic).icon||defaultImg):defaultImg"></el-image>
                <p :class="[item.handlerStatus===-1?'status-1':(item.handlerStatus===1?'status1':'status2')]">{{mapDescStatus(item.handlerStatus)}}</p>
                <p class="infinite-list-desc" style="-webkit-box-orient: vertical;" :title="item.selfDesc">{{'&nbsp;&nbsp;'+item.selfDesc}}</p>
                <p class="infinite-list-time">{{item.createTime}}</p>
              </li>
            </template>
          </ul>
        </div>
      </div>
      <div class="dataNo_icon" v-else-if="tableData.length === 2">
        <div class="div-bz-image iconfont icon-pc_huaban1"></div>
        <div class="dataNo_icon_text">发生警情</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-02"></div>
        <div class="dataNo_icon_text">系统推送</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-03"></div>
        <div class="dataNo_icon_text">领取任务</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-04"></div>
        <div class="dataNo_icon_text" style="margin-left: -47px;">已处理</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-05"></div>
        <div class="dataNo_icon_text" style="margin-left: -39px;">复位</div>
      </div>
      <div class="dataNo_icon" v-else>
        <div class="div-bz-image iconfont icon-pc_huaban1"></div>
        <div class="dataNo_icon_text">发生警情</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-02"></div>
        <div class="dataNo_icon_text">系统推送</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-03"></div>
        <div class="dataNo_icon_text">领取任务</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-04"></div>
        <div class="dataNo_icon_text" style="margin-left: -47px;">已处理</div>
        <div class="div-jiantou iconfont icon-pc-06"></div>
        <div class="div-bz-image iconfont icon-pc-05"></div>
        <div class="dataNo_icon_text" style="margin-left: -39px;">复位</div>
      </div>
      <div class="internet-content-right-nodata" v-if="tableData.length < 3">
        <div class="internet-content-right-nodata-item">
          <div class="internet-content-right-icon">
            <i class="iconfont icon-baojing"></i>
          </div>
          <div style="internet-content-right-text">
            <p class="internet-content-right-text-num">{{countObj.fireAlarmCount}}</p>
            <p class="internet-content-right-text-type">报警</p>
          </div>
        </div>
        <div class="internet-content-right-nodata-item">
          <div class="internet-content-right-icon" style="background-color:#FFB32D">
            <i class="iconfont icon-guzhang1"></i>
          </div>
          <div>
            <p class="internet-content-right-text-num">{{countObj.faultAlarmCount}}</p>
            <p class="internet-content-right-text-type">故障</p>
          </div>
        </div>
        <div class="internet-content-right-nodata-item">
          <div class="internet-content-right-icon" style="background-color:#A8A8A8">
            <i class="iconfont icon-pingbi"></i>
          </div>
          <div>
            <p class="internet-content-right-text-num">{{countObj.shieldAlarmCount}}</p>
            <p class="internet-content-right-text-type">屏蔽</p>
          </div>
        </div>
        <div class="internet-content-right-nodata-item">
          <div class="internet-content-right-icon" style="background-color:#4CA4FE">
            <i class="iconfont icon-liandong"></i>
          </div>
          <div>
            <p class="internet-content-right-text-num">{{countObj.linkageAlarmCount}}</p>
            <p class="internet-content-right-text-type">联动</p>
          </div>
        </div>
        <div class="internet-content-right-nodata-item">
          <div class="internet-content-right-icon" style="background-color:#47CFAD">
            <i class="iconfont icon-APPicon_zhengchang"></i>
          </div>
          <div>
            <p class="internet-content-right-text-num">{{countObj.normalCount}}</p>
            <p class="internet-content-right-text-type">正常</p>
          </div>
        </div>
      </div>
      <div class="internet-content-right" v-else>
        <div class="internet-content-right-max">
          <div class="internet-content-right-icon">
            <i class="iconfont icon-baojing"></i>
          </div>
          <div class="internet-content-right-text-type">报警数量</div>
          <div class="internet-content-right-text-num">{{countObj.fireAlarmCount}}</div>
        </div>
        <div class="internet-content-right-max">
          <div class="internet-content-right-icon" style="background-color:#FFB32D">
            <i class="iconfont icon-guzhang1"></i>
          </div>
          <div class="internet-content-right-text-type">故障数量</div>
          <div class="internet-content-right-text-num">{{countObj.faultAlarmCount}}</div>
        </div>
        <div class="internet-content-right-max">
          <div class="internet-content-right-icon" style="background-color:#A8A8A8">
            <i class="iconfont icon-pingbi"></i>
          </div>
          <div class="internet-content-right-text-type">屏蔽数量</div>
          <div class="internet-content-right-text-num">{{countObj.shieldAlarmCount}}</div>
        </div>
        <div class="internet-content-right-max">
          <div class="internet-content-right-icon" style="background-color:#4CA4FE">
            <i class="iconfont icon-liandong"></i>
          </div>
          <div class="internet-content-right-text-type">联动数量</div>
          <div class="internet-content-right-text-num">{{countObj.linkageAlarmCount}}</div>
        </div>
        <div class="internet-content-right-max">
          <div class="internet-content-right-icon" style="background-color:#47CFAD">
            <i class="iconfont icon-APPicon_zhengchang"></i>
          </div>
          <div class="internet-content-right-text-type">正常数量</div>
          <div class="internet-content-right-text-num">{{countObj.normalCount}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFcfRealTimeStatusCountOverview } from '@/api/home'
import { getAlarmInfo } from '@/api/alarm'
import util from '@/utils/util'
export default {
  name: 'InternetMonitor',
  props: {
    organizationId: {
      default() {
        return undefined
      },
    },
  },
  data() {
    return {
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [], //数据
      loading: true,
      formInline: {
        queryContent: '',
        fireTTypes: '',
        // resetMode: '',
        handlerStatus: '',
        orgIds: this.$store.state.userinfo.org.id || '',
        time: '',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0,
      },
      countObj: {},
      countObjList: [],
    }
  },
  created() {
    this.getTimeNow()
  },
  methods: {
    jumpJCJ_wfw(fcFacilitiesName) {
      this.$router.push({
        name: 'unresetAlarm',
        params: {
          queryContent: fcFacilitiesName || '',
        },
      })
    },
    // 更新/刷新模块
    refreshModel() {
      this.getTimeNow()
    },
    // 映射状态处理结果描述
    mapDescStatus(recordsInfoHandlerStatus) {
      let Map = {
        '-1': '未处理 ',
        2: '处理中 ',
        1: '已处理 ',
      }
      return Map[recordsInfoHandlerStatus]
    },
    getTimeNow() {
      let that = this
      // 获取当前时间
      var aData = new Date()
      this.value = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
      this.formInline.time = this.value
      // 获取数据
      getFcfRealTimeStatusCountOverview({
        orgIds: this.organizationId || this.$store.state.userinfo.org.id || '',
        fireSystemId: -1,
        fbsId: 0,
        fireTTypes: -1,
      }).then((res) => {
        if (res.status === 200) {
          that.countObj = res.data
        }
      })
      this.getalarmList()
    },
    getalarmList() {
      let that = this
      getAlarmInfo({
        orgIds: this.organizationId || this.formInline.orgIds,
        pageIndex: this.formInline.currentPageIndex - 1,
        pageSize: this.formInline.currentPageSize,
        queryContent: this.formInline.queryContent.trim(),
        fireTType: this.formInline.fireTTypes || '',
        // resetMode: this.formInline.resetMode,
        handlerStatus: this.formInline.handlerStatus,
        startTime: '',
        endTime: '',
        dataType: 0, //统计类型 0:实时（未复位） 1:历史(已复位)
      }).then((result) => {
        that.formInline.currentPageTotal = result.total
        that.tableData = result.data.listData
      })
    },
  },
}
</script>
<style lang="scss">
.internet-monitor-nodata {
  height: 240px;
}
.internet-monitor {
  height: 379px;
}
.internet-left-right {
  display: flex;
  margin-top: 20px;
  height: calc(100% - 51px);
  .dataNo_icon {
    width: 50%;
    height: 100%;
    margin: 0 20px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e1e1e1;
    .div-bz-image {
      font-size: 50px;
      color: #2876d1;
    }
    .dataNo_icon_text {
      float: left;
      margin-left: -55px;
      margin-top: 80px;
      color: #2876d1;
    }
    .div-jiantou {
      font-size: 25px;
      margin: 0 26px 0 26px;
      color: #bed6f1;
    }
  }
  .internet-content {
    margin: 0 12px 0 0;
    width: 66%;
    height: 100%;
    border: 1px solid #e1e1e1;
    .cart-top-title {
      padding: 40px 0 0 30px;
      font-size: 20px;
      font-weight: 400;
      color: #8890ab;
    }
    .infinite-list-desc {
      cursor: pointer;
      width: 400px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .infinite-list-time {
      margin-left: 15px;
      font-size: 16px;
      color: #999999;
    }
    .internetList {
      margin-top: 8px;
      width: 100%;
      height: calc(100% - 86px);
      overflow: auto;
      .infinite-list {
        margin: 0 0 0 30px;
        .label-type-item {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #2f3444;
          font-weight: 400;
          line-height: 60px;
          .status-1 {
            margin-left: 5px;
            color: #e4950b;
          }
          .status1 {
            margin-left: 5px;
            color: #47cfad;
          }
          .status2 {
            margin-left: 5px;
            color: #4ca4fe;
          }
        }
      }
    }
  }
  .internet-content-nodata {
    margin: 0 15px 0 0;
    width: 50%;
    height: 100%;
    border: 1px solid #e1e1e1;
    .cart-top-title {
      padding: 40px 0 0 30px;
      font-size: 20px;
      font-weight: 400;
      color: #8890ab;
    }
    .infinite-list-desc {
      width: 250px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .infinite-list-time {
      margin-left: 15px;
      font-size: 16px;
      color: #999999;
    }
    .internetList {
      width: 100%;
      height: calc(100% - 81px);
      overflow: auto;
      .infinite-list {
        margin: 0px 0 0 30px;
        .label-type-item {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #2f3444;
          font-weight: 400;
          .status-1 {
            margin-left: 5px;
            color: #e4950b;
          }
          .status1 {
            margin-left: 5px;
            color: #47cfad;
          }
          .status2 {
            margin-left: 5px;
            color: #4ca4fe;
          }
        }
      }
    }
  }
  .internet-content-right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 30px 0 20px 0;
    width: calc(34% - 12px);
    height: 100%;
    border: 1px solid #e1e1e1;
  }
  .internet-content-right-nodata {
    padding: 0 10px;
    width: calc(50% - 15px);
    height: 100%;
    border: 1px solid #e1e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    .rightnodataicon {
      font-size: 22px;
    }
    .internet-content-right-nodata-item {
      width: 20%;
      height: 40px;
    }
    .internet-content-right-icon {
      float: left;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      background-color: #fd5e5e;
      i {
        font-size: 18px;
        color: white;
      }
    }
    .internet-content-right-text {
      margin-left: 10px;
    }
    .internet-content-right-text-num {
      margin-top: -10px;
      font-size: 22px;
      font-weight: 400;
      color: #515151;
      text-align: center;
    }
    .internet-content-right-text-type {
      font-size: 14px;
      font-weight: 400;
      color: #8890ab;
      text-align: center;
    }
  }
}
.internet-content-right-max {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  .internet-content-right-icon {
    float: left;
    width: 40px;
    height: 36px;
    margin-left: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    background-color: #fd5e5e;
    i {
      font-size: 18px;
      color: white;
    }
  }
  .internet-content-right-text-num {
    float: right;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    font-weight: 400;
    color: #515151;
    text-align: center;
  }
  .internet-content-right-text-type {
    float: left;
    height: 40px;
    margin-left: 20px;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    font-weight: 400;
    color: #8890ab;
    text-align: center;
  }
}
</style>